import React from 'react'
// import PropTypes from 'prop-types';
import classNames from 'classnames'
import { Resizable } from 'react-resizable'
import 'react-resizable/css/styles.css'
import Table from './Table'
import List from './List'
import Empty from '@/components/Empty'
import createBodyRow from 'antd/es/table/createBodyRow';
import { pagination as page } from '@/settings'

const { pageSize } = page

const ResizeableTitle = props => {
	const {
		onResize,
		width,
		resizable = false,
		...restProps
	} = props;

	if (!width) {
		return <th {...restProps} />;
	}

	return (
		<React.Fragment>
			{resizable ? <Resizable width={width} height={0} onResize={onResize} handle={
					<span className={`react-resizable-handle react-resizable-handle-se`} onClick={e => e.stopPropagation()} />
				}>
			      <th {...restProps} />
			    </Resizable> : <th {...restProps} />
		    }
	    </React.Fragment>
	);
};

// ResizeableTitle.propTypes = {
// 	onResize: PropTypes.func.isRequired,
// 	width: PropTypes.number,
// }

const getDefaultEmpty = () => {
	return <Empty />
}

export default class SimpleTable extends React.PureComponent {
	static defaultProps = {
		prefixCls: 'x-grid',
		// rowKey: 'id',
		forceFit: false,
		resizColumn: true,
		emptyText: getDefaultEmpty()
	};
	state = {
		columns: this.props.columns,
		selectedRowKeys: [],
	};
	components = {
		header: {
			cell: ResizeableTitle,
		},
	};
	handleResize = index => (e, {
		size
	}) => {
		this.setState(({
			columns
		}) => {
			const nextColumns = [...columns];
			nextColumns[index] = {
				...nextColumns[index],
				width: size.width,
			};
			return {
				columns: nextColumns
			};
		});
	};
	static getDerivedStateFromProps(nextProps) {
		if (!nextProps.selectedRows || nextProps.selectedRows.length === 0) {
			return {
				selectedRowKeys: [],
			};
		}
		return null;
	}
	handleRowSelectChange = (selectedRowKeys, selectedRows) => {
		const {
			onSelectRow
		} = this.props;
		if (onSelectRow) {
			onSelectRow(selectedRows);
		}
		this.setState({
			selectedRowKeys
		});
	};
	render() {
		const { selectedRowKeys } = this.state;
		const {
			prefixCls,
			className,
			showHeader,
			pagination,
			selectedRows,
			resizColumn
		} = this.props
		const rowSelection = selectedRows ? {
			selectedRowKeys,
			onChange: this.handleRowSelectChange,
			getCheckboxProps: record => ({
				disabled: record.disabled
			})
		} : null
		const columns = resizColumn ? this.state.columns.map((col, index) => ({
			...col,
			onHeaderCell: column => ({
				width: column.width,
				onResize: this.handleResize(index),
				resizable: column.resizable
			}),
		})) : [];

		if (pagination) {
			pagination.pageSize = pagination.pageSize || pageSize
		}

		let props = {
			rowSelection,
			...this.props,
			className: classNames({ 
					[`${prefixCls}-no-header`]: showHeader === false,
					[`${prefixCls}-no-pagination`]: pagination === false
				}, 
				className)
		}
		if (resizColumn) {
			props = {
				...props,
				components: this.components,
				columns
			}
		}
		return (
			<Table {...props} />
		)
	}
}

const prefixListCls = 'x-list'

export class SimpeList extends React.PureComponent {
	state = {
		selectedRowKeys: [],
	};
	static Item = createBodyRow(props => {
		const {
			children,
			actions,
			...rest
		} = props

		const newActions = React.Children.map(actions, action => {
			const {
				onClick: oldClickEvent
			} = action.props

			return React.cloneElement(action, {
				...action.props,
				onClick: e => {
					e.stopPropagation()
					oldClickEvent && oldClickEvent(e)
				}
			})
		})

		return (
			<List.Item {...rest} prefixCls={prefixListCls} actions={newActions}>{children}</List.Item>
		)
	});
	static getDerivedStateFromProps(nextProps) {
		if (!nextProps.selectedRows || nextProps.selectedRows.length === 0) {
			return {
				selectedRowKeys: [],
			};
		}
		return null;
	}
	static defaultProps = {
		split: false,
    	emptyText: getDefaultEmpty()
	}
	handleRowSelectChange = (selectedRowKeys, selectedRows) => {
		const {
			onSelectRow
		} = this.props;
		if (onSelectRow) {
			onSelectRow(selectedRows);
		}
		this.setState({
			selectedRowKeys
		});
	};
	render() {
		const { selectedRowKeys } = this.state;
		const {
			children,
			pagination,
			onChange,
			selectedRows,
			onSelectRow,
			...props
		} = this.props
		if (pagination) {
			pagination.simple = true
			pagination.showQuickJumper = {
				goButton: false
			}
			pagination.pageSize = pagination.pageSize || pageSize
			pagination.onChange = onChange
		}
		const rowSelection = selectedRows ? {
			selectedRowKeys,
			onChange: this.handleRowSelectChange,
			getCheckboxProps: record => ({
				disabled: record.disabled
			})
		} : null
		return (
			<List 
				rowSelection={rowSelection}
				{...props}
				prefixCls={prefixListCls}
				pagination={pagination}
				>
				{children}
			</List>
		)
	}
}